<template>
  <a-row :gutter="16">
    <a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
      <qc-page-table
        ref="userPageTableRef"
        :columns="userState.columns"
        :loadData="loadData"
        :rowKey="(record) => record.userAccount"
        @rowSelectChange="onRowSelectChange"
      >
        <template #toolbarButton>
          <qc-add-button @click="onButtonClick('新增')"></qc-add-button>
          <qc-delete-button @click="onButtonClick('删除')"></qc-delete-button>
          <qc-save-button @click="onButtonClick('保存')"></qc-save-button>
          <qc-cancel-button @click="onButtonClick('取消')"></qc-cancel-button>
        </template>
        <template #customName="{ text }">
          <a>{{ text }}</a>
        </template>
        <template #customUserBrithday="{ text }">
          {{ text ? d(text, 'short') : '' }}
        </template>
      </qc-page-table>
    </a-col>
    <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
      <a-card :title="t('assembly.page-table.dataDisplay')">
        <qc-json-pretty :data="json" :deep="1"></qc-json-pretty>
      </a-card>
    </a-col>
  </a-row>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { TableSelectedData } from '/@/components/qc/qc-table/qc-page-table/interface'
import userApi from '/@/api/org/user'
import { userTableColumns } from '/@/views/org/user/interface'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  name: 'AssemblyPageTable',
  setup() {
    const { t, d } = useI18n()
    const userPageTableRef = ref(null)
    const userState = reactive({
      columns: userTableColumns,
      loadData: (param: any) => userApi.page(param),
    })

    const loadData = (queryParam: any) => userApi.page(queryParam)

    const tableSelectedData: TableSelectedData = reactive({
      selectedRowKeys: [],
      selectedRows: [],
    })

    const json = reactive({
      columns: userState.columns,
      tableSelectedData,
    })

    const onRowSelectChange = (selectedRowKeys: Array<string>, selectedRows: Array<any>) => {
      tableSelectedData.selectedRowKeys = selectedRowKeys
      tableSelectedData.selectedRows = selectedRows
      message.info('数据展示卡片中的【tableSelectedData】的值发生了变化')
    }

    const onButtonClick = (type: string) => {
      message.info('准备进行' + type + '操作......')
    }
    onMounted(() => userPageTableRef.value.helper.serachTable())
    return {
      t,
      d,
      userPageTableRef,
      userState,
      loadData,
      json,
      onRowSelectChange,
      onButtonClick,
    }
  },
})
</script>
<style lang='less' scoped>
</style>